<template>
	<app-layout>
		<view v-if="is_show" class='clerk-box'>
			<view class='order-info'>
				<view class='dir-left-nowrap'>
					<view class='info-label'>收货人：</view>
					<view>
						<view>{{orderDetail.name}}</view>
					</view>
				</view>
				<view class='dir-left-nowrap'>
					<view class='info-label'>联系方式：</view>
					<view>
						<view>{{orderDetail.mobile}}</view>
					</view>
				</view>
				<view class='line'></view>
				<view>
					<text class='info-label'>下单时间：</text>
					{{orderDetail.created_at}}
				</view>
				<view class="remark-box" v-if="orderDetail.remark">
					<text class='info-label'>买家留言：</text>
					{{orderDetail.remark}}
				</view>
			</view>

			<view class='goods-box'>
				<view v-for='item in orderDetail.detail' :style="{'margin-top': index == 0 ? '0': '24rpx'}"
					:key='item.id'>
					<app-jump-button :url="item.goods_info.page_url">
						<app-order-goods-info style="width:100%;" :goods='item.goods_info'></app-order-goods-info>
					</app-jump-button>
				</view>
			</view>
			<view class='order-info dir-top-nowrap'>
				<view class='dir-left-nowrap item'>
					<view class='box-grow-1 info-label'>商品定金</view>
					<view class='box-grow-0'>￥{{orderDetail.total_goods_price}}</view>
				</view>
				<view class='dir-left-nowrap item'>
					<view class='box-grow-1 info-label'>商品总数</view>
					<view class='box-grow-0'>x{{orderDetail.goods_num}}</view>
				</view>
				<view v-if='orderDetail.integral_deduction_price > 0' class='dir-left-nowrap item'>
					<view class='box-grow-1 info-label'>金币抵扣</view>
					<view class='box-grow-0'>-￥{{orderDetail.integral_deduction_price}}</view>
				</view>
				<view class='dir-left-nowrap item' v-if="orderDetail.coupon_discount_price > 0">
					<view class='box-grow-1 info-label'>优惠券优惠</view>
					<view class='box-grow-0'>-￥{{orderDetail.coupon_discount_price}}</view>
				</view>
				<!-- <view class='dir-left-nowrap item'>
					<view class='box-grow-1 info-label'>运费</view>
					<view class='box-grow-0'>￥{{orderDetail.express_price}}</view>
				</view> -->
				<view v-if='orderDetail.words' class='dir-top-nowrap item'>
					<view class='box-grow-1 info-label'>商家留言:</view>
					<view class='box-grow-0 t-extra-small-color'>{{orderDetail.words}}</view>
				</view>
				<view class='order-price-box cross-center dir-right-nowrap'>
					<view>
						合计:
						<text class='price'>￥
							<text>{{orderDetail.total_pay_price}}</text>
						</text>
					</view>
				</view>
			</view>
			<view class='order-info dir-top-nowrap'>
				<view class='dir-left-nowrap item'>
					<view class='box-grow-1 info-label'>商品全款</view>
					<view class='box-grow-0'>￥{{orderDetail.total_goods_original_price}}</view>
				</view>
				<!-- 10.14 白条金币 -->
				<view class="" v-if="orderDetail.sign != 'integral_mall' && orderDetail.sign != 'jinbi_mall'">
					<view class="dir-left-nowrap item" v-if="orderDetail.jfbt_type == 1">
						<view class='box-grow-1 info-label'>使用金币抵扣</view>
						<view class='box-grow-0'>-￥{{orderDetail.original_discount_price1}}</view>
					</view>
					<view class="dir-left-nowrap item" v-if="orderDetail.jfbt_type == 2">
						<view class='box-grow-1 info-label'>使用金币白条抵扣</view>
						<view class='box-grow-0'>-￥{{orderDetail.original_discount_price1}}</view>
					</view>
					<view class='dir-left-nowrap item'>
						<view class='box-grow-1 info-label'>商品定金</view>
						<view class='box-grow-0'>-￥{{orderDetail.total_goods_price}}</view>
					</view>
					<view class="dir-left-nowrap item order-price-box cross-center">
						<view class='box-grow-1 info-label'>实体店需付余款</view>
						<view class='box-grow-0' style="color: #ff4544" v-if="orderDetail.jfbt_type == 0">
							￥{{orderDetail.original_discount_price}}</view>
						<view class='box-grow-0' style="color: #ff4544"
							v-if="orderDetail.jfbt_type == 1 || orderDetail.jfbt_type == 2">
							￥{{orderDetail.original_discount_price - orderDetail.original_discount_price1}}
						</view>
					</view>
				</view>
			</view>

			<view class="order-info dir-top-nowrap form-data">
				<app-form-data :detail="orderDetail.detail"></app-form-data>
			</view>
			<view style="height: 140rpx; width: 100%"></view>
			<view class='action-box'>
				<button v-if='orderDetail.is_pay == 1 && orderDetail.clerk_id == 0' @click='orderClerk'
					class='box-grow-0 btn'>
					核销订单
				</button>
				<button v-if='orderDetail.is_pay == 0' class='box-grow-0 btn' @click='clerkAffirmPay'>确认收款</button>
				<view class="cross-center main-center clerk-text" v-else>订单已核销</view>
			</view>
		</view>
		<view v-if="msg" class='bg cross-center main-center'>
			<view class='dialog'>
				<view>提示</view>
				<view class='dialog-content'>无核销权限</view>
				<view @click='toIndex' class='dialog-btn'>确认</view>
			</view>
		</view>
	</app-layout>
</template>

<script>
	import {
		mapState
	} from 'vuex';
	import appOrderGoodsInfo from "../../../../components/page-component/app-order-goods-info/app-order-goods-info.vue";
	import appFormData from "../../../../components/basic-component/app-order/app-form-data.vue";
	export default {
		components: {
			'app-order-goods-info': appOrderGoodsInfo,
			appFormData,
		},
		data() {
			return {
				id: null,
				orderDetail: {},
				clerk_remark: '',
				is_show: false,
				msg: false
			}
		},
		computed: {
			...mapState({
				userInfo: state => state.user.info
			})
		},
		methods: {
			toIndex() {

				uni.redirectTo({
					url: '/pages/index/index'
				});
			},
			getOrderDetail() {
				let url = this.$apiSol.order.detail
				this.$request({
					url: url,
					data: {
						id: this.id,
						action_type: 1
					}
				}).then(response => {
					this.$hideLoading();
					this.is_show = true;
					if (response.code === 0) {
						this.orderDetail = response.data.detail;
						// 11.15 显示有分享，但未分享价格 显示的全款和实体店需付
						if (this.orderDetail.isgoodshare == 2) {
							this.orderDetail.total_goods_original_price = this.orderDetail
								.total_originalcost_price
							this.orderDetail.original_discount_price = this.orderDetail
								.total_originalcost_price - this.orderDetail.total_goods_price
							this.orderDetail.detail.forEach(item => {
								item.goods_info.total_original_price = item.total_originalcost_price
							})
						}
					}
				}).catch(() => {
					this.$hideLoading();
				});
			},
			IsClerk(uid) {
				this.$showLoading();
				this.$request({
					url: this.$apiSol.user.is_clerk,
					data: {
						clerk_id: uid,
					}
				}).then(response => {
					if (response.code === 0) {
						if (response.data.is_clerk_user == 1) {
							this.getOrderDetail();
						} else {
							this.$hideLoading();
							this.msg = true;
						}
					}
				}).catch(() => {
					this.$hideLoading();
				});
			},
			clerkAffirmPay() {
				let self = this;
				uni.showModal({
					title: '提示',
					content: '确认已进行线下收款?',
					success: function(res) {
						if (res.confirm) {
							uni.showLoading({
								title: '加载中'
							});
							self.$request({
								url: self.$apiSol.order.clerk_affirm_pay,
								data: {
									id: self.id,
									action_type: 1,
								}
							}).then(response => {
								uni.hideLoading();
								if (response.code === 0) {
									self.getOrderDetail();
								} else {
									uni.showToast({
										title: response.msg,
										icon: 'none',
									});
								}
								this.msg = response.data.msg
							}).catch(() => {
								uni.hideLoading();
							});
						}
					}
				});
			},
			orderClerk() {
				let self = this;
				let url = self.$apiSol.order.order_clerk
				uni.showModal({
					content: '是否核销订单？',
					success: function(res) {
						if (res.confirm) {
							self.$showLoading();
							self.$request({
								url: url,
								data: {
									id: self.id,
									action_type: 1,
									clerk_remark: self.clerk_remark
								}
							}).then(response => {
								self.$hideLoading();
								uni.showToast({
									title: response.msg,
									icon: 'none',
									duration: 2000,
									success: function() {
										if (response.code === 0) {
											setTimeout(() => {
												uni.redirectTo({
													url: '/plugins/clerk/order/order?status=1&type=1'
												})
											}, 2000);
										}
									}
								})
							}).catch(() => {
								self.$hideLoading();
							});
						}
					}
				})
			},
			closeDialog() {
				if (this.msg == '核销成功') {
					this.msg = '';
					if (this.is_clerk) {
						let pages = getCurrentPages();
						let idx;
						pages.forEach((row, index) => {
							if (pages[index].route === 'plugins/clerk/order/order') {
								idx = index
							}
						});
						if (idx > -1) {
							pages[idx]._num = 1;
							uni.navigateBack({
								delta: pages.length - 1 - idx
							});
						} else {
							uni.redirectTo({
								url: '/plugins/clerk/order/order?status=1&type=1'
							})
						}
					} else {
						uni.redirectTo({
							url: '/pages/index/index'
						})
					}
				} else {
					this.msg = '';
				}
			},
			async getInfo() {
				let self = this
				const res = await self.$request({
					url: self.$apiSol.user.user_info,
					method: 'get',
				})
				if (res.code == 0) {
					self.IsClerk(res.data.options.user_id);
				}
			},
		},
		onLoad(options) {
			let that = this;
			that.id = options.id;
			that.getInfo()
			/* var getUser = setInterval(() => {
				if (that.userInfo) {
					that.IsClerk();
					clearInterval(getUser);
				}
			}, 500) */
		}
	}
</script>

<style lang="scss" scoped>
	.bg {
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		background-color: rgba(0, 0, 0, .3);
		z-index: 1000;

		.dialog {
			margin-top: #{-100rpx};
			width: #{630rpx};
			background-color: #fff;
			padding-top: #{40rpx};
			border-radius: #{16rpx};
			font-size: #{32rpx};
			color: #353535;
			text-align: center;

			.dialog-content {
				margin: #{40rpx};
			}

			.dialog-btn {
				color: #ff4544;
				height: #{88rpx};
				line-height: #{88rpx};
				border-top: #{1rpx} solid #e2e2e2;
			}
		}
	}

	.clerk-box {
		position: absolute;
		width: 100%;
		height: 100%;
	}

	.remark-box {
		margin-top: 14#{rpx};
	}

	.action-box {
		position: fixed;
		background-color: #fff;
		height: 140#{rpx};
		bottom: 0;
		width: 100%;
		z-index: 999;

		.btn {
			background-color: $uni-important-color-red;
			color: #fff;
			z-index: 999;
			width: 702#{rpx};
			margin-top: 26#{rpx};
			font-size: 32#{rpx};
			height: 88#{rpx};
			line-height: 88#{rpx};
			border-radius: 44#{rpx};
		}

		.btn::after {
			border: 0;
		}

		.clerk-text {
			font-size: $uni-font-size-import-one;
			height: 100%;
			color: $uni-general-color-one;
		}
	}

	.order-info {
		width: 702#{rpx};
		margin: 24#{rpx};
		background-color: #fff;
		border-radius: 16#{rpx};
		padding: 24#{rpx};
		font-size: $uni-font-size-general-one;
		color: $uni-important-color-black;
	}

	.order-info.form-data {
		margin-bottom: #{24rpx};
	}

	.line {
		height: 1#{rpx};
		width: 654#{rpx};
		background-color: $uni-weak-color-one;
		margin: 22#{rpx} 0;
	}

	.info-label {
		color: $uni-general-color-two;
	}

	.goods-box {
		width: 702#{rpx};
		margin: 0 24#{rpx};
		background-color: #fff;
		border-radius: 16#{rpx};
		padding: 24#{rpx};
		font-size: 28#{rpx};
		color: $uni-important-color-black;
	}

	.order-price-box {
		border-top: 1#{rpx} solid #e2e2e2;
		margin-top: 24#{rpx};
		padding: 20#{rpx} 0 6#{rpx};
		font-size: 28#{rpx};
		color: $uni-important-color-black;
		border-bottom-left-radius: 16#{rpx};
		border-bottom-right-radius: 16#{rpx};
		background-color: #fff;
	}

	.order-price-box .price {
		font-size: 28#{rpx};
		color: $uni-important-color-red;
	}

	.bg {
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		background-color: rgba(0, 0, 0, .3);
		z-index: 1000;
	}

	.dialog {
		width: 630#{rpx};
		background-color: #fff;
		padding-top: 40#{rpx};
		border-radius: 16#{rpx};
		font-size: 32#{rpx};
		color: $uni-important-color-black;
		text-align: center;
	}

	.dialog-content {
		margin: 40#{rpx};
	}

	.dialog-btn {
		color: $uni-important-color-red;
		height: 88#{rpx};
		line-height: 88#{rpx};
		border-top: 1#{rpx} solid $uni-weak-color-one;

		.view1 {
			color: $uni-important-color-black;
			width: 50%;
		}

		.view2 {
			height: 45#{rpx};
			width: 1#{rpx};
			background-color: $uni-weak-color-one;
		}

		.view3 {
			width: 50%;
		}
	}
</style>
